@import "variables.scss";
body.history-body-bg{
    background: url(../images/history_body_bg.jpg) no-repeat;
    background-size: cover;
}
.history-box{
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    .history-item{
        width: 18%; height: 88%; position: relative;
        background: #0c104b;
        &:before,
        &:after{
            content: '';
            position: absolute;
            background: #0b0f3c;
        }
        &:before{
            height: 30px;width: 1px;top: -30px;right: 0;
        }
        &:after{
            width: 30px;height: 1px;top: 0;right: -30px;
        }
        a{
            display: block;color:#fff;height:100%;
            h3{
                width: 38px;height: 284px;background: #0c104b;
                position: absolute;right: -39px;bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: bottom .275s $bezier-mazel;
            }
            &:hover{
                h3{
                    bottom: 40px;
                }
                .hover-info{
                    transform: scaleY(1);
                }
                .inner{
                    .info{
                        opacity: 0;
                        transform: translate3d(0,-50px,0);
                    }
                }
            }
        }
        .hover-info{
            width: 119%;height: 112%;
            position: absolute;top: -25px;left: -6%;z-index: 25;
            background: url(../images/history-item-bg.png) no-repeat;
            background-size: 100% 100%;
            transform: scaleY(0);
            transform-origin: top center;
            transition: all .375s $bezier-mazel;
            .nub-til{
                border: 10px #0c104b solid;
                margin-left: -100px;top: 85px;
            }
            .info{
                bottom: 110px;padding-left: 40px;padding-right: 50px;color: #0c104b;
            }
        }
        .inner{
            width: 100%;height: 100%;overflow: hidden;
            background: url(../images/building.png) no-repeat;
            animation: building1 15s linear infinite;           
        }
        &.item2{
            .inner{
                animation-name: building2;
            }
        }
        &.item3{
            .inner{
                animation-name: building3;
            }
        }
        &.item4{
            .inner{
                animation-name: building4;
            }
        }
        .nub-til{
            width: 160px;height: 160px;border-radius: 50%;border: 10px #fff solid;
            position: absolute;left: 50%;margin-left: -90px;top: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            .img{
                display: inline-block;
            }
        }
        .info{
            height: 280px;
            position: absolute;bottom: 20px;padding: 0 20px;
            opacity: 1;
            transform: translate3d(0,0,0);
            transition: all .275s $bezier-mazel;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            h4{
                font-size: 15px;letter-spacing: 4px; margin-bottom: 15px;padding-bottom: 10px;position: relative;
                &:after{
                    content: '';
                    width: 40px;height: 5px; background: #d7b890;
                    position: absolute;left: 0;bottom: 0;
                }
            }
            p{
                font-weight: 200;
            }
        }
    }
}

@keyframes building1 {
    0%{
        background-position: 0 0;
    }
    25%{
        background-position: 50% 0;
    }
    50%{
        background-position: 100% 0;
    }
    75%{
        background-position: 50% 0;
    }
    100%{
        background-position: 0 0;
    }
}

@keyframes building2{
    0%{
        background-position: 50% 0;
    }
    25%{
        background-position: 100% 0;
    }
    50%{
        background-position: 50% 0;
    }
    75%{
        background-position: 0% 0;
    }
    100%{
        background-position: 50% 0;
    }
}
@keyframes building3{
    0%{
        background-position: 75% 0;
    }
    25%{
        background-position: 100% 0;
    }
    50%{
        background-position: 50% 0;
    }
    75%{
        background-position: 0 0;
    }
    100%{
        background-position: 75% 0;
    }
}
@keyframes building4{
    0%{
        background-position: 100% 0;
    }
    25%{
        background-position: 50% 0;
    }
    50%{
        background-position: 0 0;
    }
    75%{
        background-position: 50% 0;
    }
    100%{
        background-position: 100% 0;
    }
}


@media screen and (max-width:1280px) {
    .history-box{
        .history-item{
            width: 20%;
            .nub-til{
                width: 120px;height: 120px;margin-left: -70px;
                .img{
                    width: 72px;
                }
                img{
                    max-width: 100%;
                }
            }
            .hover-info{
                .nub-til{
                    margin-left: -80px;
                }
            }
            .info{
                height: 330px;
            }
        }
    }
}